<template>
	<view>
		<view class="categories_nav">
			<view class="nav_right">
				<text :class=" xunzgobf===0 ? 'white_red' : '' " @click="zhclick(0)">综合</text>
				<text :class=" xunzgobf===1 ? 'white_red' : '' " @click="zhclick(1)">销量</text>
				<text :class=" xunzgobf===2 ? 'white_red' : '' " @click="zhclick(2)">价格</text>
			</view>
			<view class="nav_left">
				<text>筛选</text>
			</view>
		</view>
		<view class="categories_body">
			<view class="categories_data" v-for="(v,i) in zongheData" :data-id="v.id" @click="detail(v.id)">
				<image class="kuang" :src="imgUrl+v.img" mode=""></image>
				<!-- <view class="kuang">1</view> -->
				<view>{{v.fzzl}} {{v.fzjj}}</view>
				<view class="categories_hidden">{{v.name}}</view>
				<view >￥{{v.spjg}}<text :style="v.youhuiquan==null?'display:none':''">可减{{v.youhuiquan}}元</text></view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import http from '../../until/http';
	import {useStore} from 'vuex';
	import {computed,reactive,toRefs,onMounted} from 'vue'
	export default {
		setup(){
			const store=useStore();
			let data=reactive({
				
				imgUrl:'http://localhost:8888/getImg?sort=',
				zongheData:[],
				xssl:0,
				xunzgobf:0,
				getData(){
					http({
						url:'/goods/getzonghe',
						data:{
							fzzl:store.state.yao.value
						}
					}).then((res)=>{
						console.log(res)
						data.zongheData=res.data.data
						// console.log(111,data.zongheData)
						
					})
				},
				detail(i){
					store.commit('yao/getId',i)
					console.log(i)
					uni.navigateTo({
						url:'../spxq/spxq'
					})
				},
				zhclick(n){
					data.xunzgobf=n
					if(data.xunzgobf==0){
						data.getData()
					}else if(data.xunzgobf==1){
						data.xlclick()
					}else{
						data.jgclick()
					}
					// console.log(data.xunzgobf)
				},
				xlclick(){
					http({
						url:'/goods/getxiaoliang',
						data:{
							fzzl:store.state.yao.value
						}
					}).then((res)=>{
						data.zongheData=res.data.data  
						// console.log(222,data.zongheData)
					})
				},
				jgclick(){
					// console.log(333,data.zongheData)
					http({
						url:'/goods/getjiage',
						data:{
							fzzl:store.state.yao.value
						},
					}).then((res)=>{
						data.zongheData=res.data.data  
						// console.log(22,data.zongheData)
					})
				}
				
			})
			onMounted(()=>{
				// console.log(store.state.yao.value)
				data.getData()
			})
			return {...toRefs(data)}
		}
	}
		
</script>

<style scoped>
.white_red{
	color: red;
	background-color: white;
}
.categories_nav{
	
	padding:20rpx 40rpx;
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid rgb(243,243,243);
}
.nav_right text{
	margin:0 40rpx;
}
.categories_data .kuang{
	/* border: 1px solid pink; */
	width:300rpx;
	height:300rpx;
	/* margin: 10rpx; */
}
.categories_hidden{
	width: 300rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.categories_data view:nth-child(2){
	margin-top: 10rpx;
}
.categories_body{
	margin-bottom:100rpx;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}
.categories_data{
	margin-top: 30rpx;
	padding: 10rpx;
	background-color: rgb(243,243,243);
}
.categories_data view:last-child{
	margin-top:30rpx ;
	color:red ;
}
.categories_data view:last-child text{
	margin-left: 20rpx;
	font-size: 28rpx;
}
</style>
